/**
* @file newRole.vue
* @author huang
* @date 2023/8/21
* @description Add a brief description of the file here.
* @projectName
* @email newflyhuang@gmail.com
*/

<template>
  <dialog-template>
    <template #title>
      {{ title }}
    </template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
      </el-form-item>
      <el-form-item label="角色顺序" prop="roleSort">
        <el-input-number v-model="form.roleSort" :min="0" controls-position="right" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio label="0">
            正常
          </el-radio>
          <el-radio label="1">
            停用
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
        <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
        </el-checkbox>
        <el-tree
          ref="menu"
          :check-strictly="!form.menuCheckStrictly"
          :data="menuListTree"
          default-expand-all
          :props="defaultProps"
          class="tree-box"
          empty-text="加载中，请稍候"
          node-key="menuId"
          show-checkbox
        />

      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <pure-button label="取消" @click="onDone" />
      <pure-button label="确定" @click="submitForm" />

    </template>
  </dialog-template>

</template>

<script>
import SystemRoleApi from '../api';
import { convertToTree, } from '@/common/utils/convert';
import { isEmpty, } from 'lodash-es';
import DialogTemplate from '@/common/components/dialog/template.vue';

export default {
  components: {
    DialogTemplate,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        roleName: '',
        roleKey: '',
        roleSort: '',
        status: '0',
        menuCheckStrictly: false,
        remark: '',
        menuIds: [],
      },
      menuList: [],
      menuExpand: true,
      menuNodeAll: false,
      menuOptions: [],
      defaultProps: {
        children: 'children',
        label: 'menuName',
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur', },
        ],
        roleKey: [
          { required: true, message: '请输入权限字符', trigger: 'blur', },
        ],
        roleSort: [
          { required: true, message: '请输入角色顺序', trigger: 'blur', },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur', },
        ],
      },
      // menuListTree: [],
    };
  },
  computed: {
    menuListTree: {
      set(val) {
        this.menuList = val;
      },
      get() {
        return convertToTree(this.menuList, { id: 'menuId', parentId: 'parentId', });
      },
    },
  },
  watch: {
    data: {
      handler(val) {
        if (isEmpty(val)) {
          return;
        }
        this.form = val;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      // this.form = this.data;
      this.getMenuList();
    });
  },
  methods: {
    // 获取菜单列表
    async getMenuList() {
      const rs = await SystemRoleApi.getMenuList();
      this.menuListTree = rs.data;
      this.$nextTick(async () => {
        await this.getMenuListByRoleId();
      });
    },
    // 获取对应角色的菜单列表
    async getMenuListByRoleId() {
      if (this.form?.roleId) {
        const rs = await SystemRoleApi.getMenuByRole(this.form.roleId);
        rs.data.forEach(v => {
          this.$refs.menu.setChecked(v, true, false);
        });
        //  选中的菜单节点判断
        this.menuNodeAll = this.menuList.length === rs.data.length;
      }
    },

    // 展开/折叠
    handleCheckedTreeExpand(val) {
      console.log(val);
      const treeNode = this.$refs.menu.store.nodesMap;
      for (const i in treeNode) {
        treeNode[i].expanded = val;
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(val) {
      this.$refs.menu.setCheckedNodes(val ? this.menuList : []);
    },
    // 树权限（父子联动）
    handleCheckedTreeConnect(value) {
      this.form.menuCheckStrictly = !!value;
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      const checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    onDone() {
      this.$emit('done');
    },
    // 提交按钮
    submitForm: function () {
      this.$refs['form'].validate(async (valid) => {
        this.form.menuIds = this.getMenuAllCheckedKeys();
        if (valid) {
          if (this.form.roleId) {
            await SystemRoleApi.updateRole(this.form);
            this.$message.success('修改成功');
          } else {
            this.$message.success('新增成功');
            await SystemRoleApi.addRole(this.form);
            this.onDone();
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-box {
  margin-top: 5px;
  height: 200px;
  overflow: auto;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius:4px;
}
</style>
